<template>
	<view class="pop" :class="['pop--' + type ,show ? 'pop--show' : '' ]" >
		
		<view v-if="overlay" class="pop__mask" :class="[showOverlay ? '' : 'pop__mask--hide']" @tap="handleMaskClick"></view>
		<view class="pop__container">
			<slot></slot>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				value: false
			},
			// 是否有遮罩层
			overlay: {
				type: Boolean,
				value: true
			},
			// 遮罩层是否会显示
			showOverlay: {
				type: Boolean,
				value: true
			},
			// 内容从哪个方向出，可选 center top bottom left right
			type: {
				type: String,
				value: 'center'
			}
		},

		methods: {
			handleMaskClick: function handleMaskClick() {
				this.triggerEvent('clickmask', {});
			}
		}
	}
</script>

<style>
	.pop {
		visibility: hidden
	}

	.pop--show {
		visibility: visible
	}

	.pop__mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 14;
		background: rgba(0, 0, 0, .5);
		display: none
	}

	.pop__mask--hide {
		background: 0 0
	}

	.pop__container {
		position: fixed;
		left: 50%;
		top: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		z-index: 15;
		opacity: 0
	}

	.pop--show .pop__container {
		opacity: 1
	}

	.pop--show .pop__mask {
		display: block
	}

	.pop--left .pop__container {
		left: 0;
		top: 50%;
		-webkit-transform: translate3d(-100%, -50%, 0);
		transform: translate3d(-100%, -50%, 0)
	}

	.pop--show.pop--left .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}

	.pop--right .pop__container {
		right: 0;
		top: 50%;
		left: auto;
		-webkit-transform: translate3d(100%, -50%, 0);
		transform: translate3d(100%, -50%, 0)
	}

	.pop--show.pop--right .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}

	.pop--bottom .pop__container {
		top: auto;
		left: 50%;
		bottom: 0;
		-webkit-transform: translate3d(-50%, 100%, 0);
		transform: translate3d(-50%, 100%, 0)
	}

	.pop--show.pop--bottom .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}

	.pop--top .pop__container {
		top: 0;
		left: 50%;
		-webkit-transform: translate3d(-50%, -100%, 0);
		transform: translate3d(-50%, -100%, 0)
	}

	.pop--show.pop--top .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}
</style>
